<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
        /*----------------------------整体评价情况-------------------------------*/
        .remarktotal{
            width: 700px;
            padding: 15px 0;
        }
        .remarktotal div{
            width: 28%;
            display: inline-block;
            vertical-align: top;
            margin-top: 15px;
            height: 138px;
            /*text-align: center;*/
            /*line-height: 20px;*/
            border-right: 1px solid #ddd;
            padding-left: 30px;
        }
        .remarktotal div p{
            margin:10px 0;
        }
        .remark {
            width: 700px;
        }



        /*----------------------------用户打分详细情况-------------------------------*/

        .remark h3.detailtitle{
            height: 30px;
            line-height: 30px;
            border-top: 2px solid #999;
        }
        .remark ul{
            height: 30px;
            background: rgb(248,248,248);
            line-height: 30px;
        }
        .remark li{
            float: left;
            height: 30px;
            padding: 0 20px;
        }
        .remark li.cur{
            background: rgb(235,235,235);
        }
        .remarkitem{
            position: relative;
        }
        .remark .userinfo{
            position: absolute;
            top: 10px;
            left: 10px;
            width: 80px;
            height: 80px;
            /*background: red;*/
        }
        .remark .userinfo img{
            width: 55px;
            height: 55px;
            display: block;
        }
        .remarkinfo{
            margin-left: 100px;
        }
        .remarkinfo p{
            margin: 15px 0;
        }
        .remarkinfotxt{
            line-height: 15px;
        }
        .star-out{
            background: url("images/star.png");
            width: 60px;
            height: 12px;
            display: inline-block;
        }
        .star-in{
            background: url("images/star-hover.png"); no-repeat;
            width: 30px;
            height: 12px;
            display: inline-block;
        }
        .remark .chioce-select{
            float: right;
        }
        .icon-mark-out{
            width: 60px;
            height: 12px;
            display: inline-block;
            background: #f76120;
        }
        .icon-mark-in{
            display: inline-block;
            width: 30px;
            height: 12px;
            background: yellow;
        }
        .bigstar .star-out{
            width: 90px;
            height: 18px;
            background-size: 18px 18px;
        }
        .bigstar .star-in{
            width: 45px;
            height: 18px;
            background-size: 18px 18px;
        }

        /*----------------------------用户印象-------------------------------*/
        .label{
            width: 700px;
            border:1px solid #ddd;
            padding: 30px;
        }
        .label p{
            height: 80px;
            float: left;
            margin-right:20px;
        }

        .label div{

        }
        .label div a{
            display: inline-block;
            padding: 2px;
            border:2px solid #f76120;
            margin:2px 5px;
            color:#f76120;
        }
    </style>
</head>
<body>
    <img src="用户评价1.png" alt="">
    <!--评价的整体情况-->
    <div class="remarktotal">
        <h3 class="detailtitle">消费评价</h3>
        <div>
            <p><span class="c-orange fs-32">3.7分</span></p>
            <p class="bigstar"><span class="star-out mr10"><span class="star-in"></span></span></p>
            <p>共89评价</p>
        </div>
        <div>
            <p>
                口味
                <span class="star-out mr10"><span class="star-in"></span></span>20人
                4.3分
            </p>
            <p>
                服务
                <span class="star-out mr10"><span class="star-in"></span></span>20人
                5分
            </p>
            <p>
                环境
                <span class="star-out mr10"><span class="star-in"></span></span>20人
                5分
            </p>
        </div>
        <div style="border-right: none;">
            <p>
                5分
                <span class="icon-mark-out"><span class="icon-mark-in"></span></span>
                20人
            </p>
            <p>
                4分
                <span class="icon-mark-out"><span class="icon-mark-in"></span></span>
                12人
            </p>
            <p>
                3分
                <span class="icon-mark-out"><span class="icon-mark-in"></span></span>
                7人
            </p>
            <p>
                2分
                <span class="icon-mark-out"><span class="icon-mark-in"></span></span>
                7人
            </p>
            <p>
                1分
                <span class="icon-mark-out"><span class="icon-mark-in"></span></span>
                3人
            </p>
        </div>
    </div>


    <div class="label">
        <p>大家都在说：</p>
        <div>
            <a href="">味道很好(83)</a>
            <a href="">环境不错(1)</a>
            <a href="">服务态度(50)</a>
            <a href="">菜量足(40)</a>
            <a href="">上菜快(33)</a>
            <a href="">不用等位(12)</a>
            <a href="">味道很好(19)</a>
            <a href="">味道很好(83)</a>
            <a href="">环境不错(1)</a>
            <a href="">服务态度(50)</a>
            <a href="">菜量足(40)</a>
            <a href="">上菜快(33)</a>
            <a href="">不用等位(12)</a>
            <a href="">味道很好(19)</a>
            <a href="">味道很好(83)</a>
            <a href="">环境不错(1)</a>
            <a href="">服务态度(50)</a>
            <a href="">菜量足(40)</a>
            <a href="">上菜快(33)</a>
            <a href="">不用等位(12)</a>
            <a href="" class="c-gray">味道很好(19)</a>
        </div>
    </div>


    <div class="remark">
        <h3 class="detailtitle">用户评价</h3>
        <ul>
            <li class="cur">全部</li>
            <li>晒图评价</li>
            <li class="chioce-select">
                <select name="" id="">
                    <option value="">选择1</option>
                    <option value="">选择2</option>
                </select>
            </li>
            <li></li>
        </ul>
        <!-- 用户评价列表 -->
        <div class="userremarklist">
            <div class="remarkitem">
                <div class="userinfo">
                    <img src="images/user2.png" alt="">
                    <span>用户名<i class="icon-user">3等</i></span>
                </div>

                <div class="remarkinfo">
                    <p>
                        <span class="star-out mr10">
                            <span class="star-in"></span>
                        </span>
                        2016-9-27
                    </p>
                    <p class="remarkinfotxt">
                        <a class="c-orange" href=""><b>[认真评价]</b></a>来了很多次了，好多年前都有的团购，郑州最喜欢的自助，价格亲民，食材新鲜，自助烧烤系列全面，想吃的东西都有，最喜欢鲜虾，还有牛肉，鸡翅。里面大厨做好的成品菜也是很赞，喜欢花甲，大骨头，醋鱼。几乎每周都会来一次，希望团购活动保持下去。
                        <div class="imglist">
                            <a href=""><img width="100" height="100" src="images/review2-pic2.jpg" alt=""></a>
                            <a href=""><img width="100" height="100" src="images/review2-pic2.jpg" alt=""></a>
                            <a href=""><img width="100" height="100" src="images/review2-pic2.jpg" alt=""></a>
                        </div>
                        <p class="c-lgray">米奇BABY乐园儿童蛋糕</p>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>






























